import styled from 'styled-components'
import { Icon, CopyIcon } from '@/components/Icon'
import { greenColor, highColor, warnColor } from '@/styles/var'
import { Modal } from '@kedacom/react-next'
const StyledButton = styled.div`
	&.button-log {
		display: flex;
		justify-content: right;
		margin-top: 10px;
		.button-warp {
			margin-left: auto;
		}
	}
	@media screen and (min-width: 1421px) {
		&.button-log {
			display: flex;
			margin-left: auto;
			margin-top: 0;
		}
	}
	@media screen and (max-width: 1422px) {
		&.button-log {
			display: flex;
			margin-left: auto;
		}
	}
`
const StyledLog = styled.div`
	&.log-list-wrap {
		.m-table-link {
			font-size: 12px;
		}
		width: 100%;
		.date-picker {
			position: relative;
		}
		.table-wrap {
			// margin-top: 24px;
			.no-approve {
				color: ${highColor};
			}
			.reject {
				color: ${warnColor};
			}
			.success {
				color: ${greenColor};
			}
		}
	}
`
const StyledFilter = styled.div`
	&.button-warp {
		justify-content: right;
		margin-bottom: 8px;
		width: 100%;
		height: 50px;
	}
	@media screen and (max-width: 1308px) {
		& > :first-child {
			height: 64px;
			align-content: space-between;
		}
	}

	&.log-fliter {
		margin-bottom: 0;
		.filter-space > * {
			margin-bottom: 10px;
		}
	}
	.filter-wrap {
	}
`
const StyledDetail = styled.div`
	&.detail-wrap {
		margin-top: 18px;
		margin-left: 20px;
		.content {
			overflow-y: auto;
			.remark-wrap {
				margin: 10px 20px 0 20px;
			}
			.item-wrap {
				line-height: 36px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.label {
					width: 100px;
				}
				.value {
					width: 560px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.no-approve {
					color: ${highColor};
				}
				.reject {
					color: ${warnColor};
				}
				.success {
					color: ${greenColor};
				}
			}
			.operation-obj-wrap {
				display: flex;
				justify-content: flex-start;
				.left-title {
					width: 100px;
					height: 36px;
					line-height: 36px;
				}
				.right-wrap {
					position: relative;
					top: 2px;
				}
			}
		}
	}
`
const StyledPieModal = styled.div`
	&.modal-pie {
		.modal-loading {
			text-align: center;
			margin-top: 150px;
			font-size: 20px;
		}
		.pie-left-style {
			display: inline-block;
			width: 450px;
			margin-left: 30px;
		}
		.pie-right-style {
			display: inline-block;
			width: 600px;
			margin-left: 30px;
		}
		.remark-modal {
			text-align: center;
			font-weight: bold;
			font-size: 16px;
		}
	}
`
const StyledIco = styled(Icon)`
	&.search-icon {
		background-position: -80px -157px;
		width: 20px;
		height: 20px;
		line-height: 20px;
	}
`
const StyledArrowRightTimeIco = styled(Icon)`
	background-position: 0px -2109px;
	margin-top: 10px;
	width: 9px;
	height: 5px;
	line-height: 16px;
`

const StyledSearchIco = styled(Icon)`
	background-position: -80px -157px;
	margin-top: 4px;
	width: 20px;
	height: 20px;
	line-height: 20px;
`

const StyledActionWrapper = styled.text`
	color: #007ac0;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
`

const StyledModal = styled(Modal)`
	&.log-modal {
		height: 580px;
	}
	&.password-modal {
		height: 260px;
		width: 450px;
		.kd-modal-body {
			display: flex;
			justify-content: center;
			padding: 0 16px;
			align-items: center;
		}
	}
	.button-modal {
		justify-content: center;
		margin: 30px 0;
	}
`
const StyledCopyIco = styled(CopyIcon)`
	&.copy-warp {
		margin-left: 10px;
	}
`
export {
	StyledDetail,
	StyledIco,
	StyledArrowRightTimeIco,
	StyledSearchIco,
	StyledCopyIco,
	StyledActionWrapper,
	StyledLog,
	StyledModal,
	StyledPieModal,
	StyledFilter,
	StyledButton,
}
